<script>
import shareInfo from "../../utils/shareInfo"
import UniLoadMore from "../../uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue"
import empty from "../../components/empty.vue"
import popupPicker from "../../components/popupPicker/index.vue"
import searchIcon from "./assets/search.png"
import downArrowIcon from "./assets/down-arrow.png"
import lockIcon from "./assets/lock.png"
import downloadIcon from "./assets/download.png"
import dateUtils from "../../utils/dateUtils"
import request from "../../utils/request"
import store from "../../store"
import { userActionType } from "../../store/modules/user"
import { showModal } from "../../utils"
import information from "../../shopping/pages/informationDetail/information"
import viewIcon from "./assets/view.png"
import downloadLightIcon from "./assets/download_light.png"
import websocket from "@/utils/websocket"
import studyRoomFloat from "@/components/studyRoomFloat/index.vue"

export default {
  name: "index",
  components: { popupPicker, empty, UniLoadMore, studyRoomFloat },
  data() {
    return {
      informationList: [],
      inputForm: {
        informationTypeCode: "",
        year: "",
        title: "",
        examId: "",
      },
      pagination: {
        size: 10,
        current: 1,
      },
      total: 0,
      searchIcon,
      downArrowIcon,
      lockIcon,
      downloadIcon,
      optionList: {
        informationTypeList: [{ informationTypeCode: "", informationTypeName: "不限" }],
        yearList: [
          { value: "", label: "不限" },
          ...dateUtils.getPrevious20Years().map((item) => {
            return {
              value: item,
              label: item,
            }
          }),
        ],
      },
      loadMoreStatusText: "more",
      examList: [], //考试列表
      viewIcon,
      downloadLightIcon,
    }
  },
  computed: {
    //年份选择器绑定数据
    yearsPicker: {
      set(index) {
        this.inputForm.year = this.optionList.yearList[index].value
      },
      get() {
        return this.optionList.yearList.findIndex((item) => item.value === this.inputForm.year)
      },
    },
    //资料类别选择器绑定数据
    informationTypePicker: {
      set(index) {
        this.inputForm.informationTypeCode = this.optionList.informationTypeList[index].informationTypeCode
      },
      get() {
        return this.optionList.informationTypeList.findIndex((item) => item.informationTypeCode === this.inputForm.informationTypeCode)
      },
    },
		userSelectExamId: () => store.getters[userActionType.getters.userSelectExamId],
  },
  onLoad() {
    //查询资料类别列表
    request({
      url: "information/getInformationTypeList",
      errorHandle: true,
    }).then((data) => {
      this.optionList.informationTypeList.push(...data)
    })
  },
  onShow() {
		websocket.trackCurrentPage("资料列表").catch(()=>{})
    //查询考试列表
    request({
      url: "exam/getAllExam",
      showLoading: true,
      errorHandle: true,
    }).then(async (data) => {
      this.examList = data
      //默认选中用户当前的考试
      if (!this.userSelectExamId) {
				await store.dispatch(userActionType.action.examInfo)
			}
      if (this.userSelectExamId) {
        this.inputForm.examId = this.userSelectExamId
        //默认选中第一个
      } else {
        this.inputForm.examId = data[0].examId
      }
      await this.resetPaginationAndRefreshList()
    })
  },
  methods: {
    //获取资料列表
    getInformationList() {
      return new Promise(async (resolve, reject) => {
        request({
          url: "information/getInformationList",
          data: {
            ...this.inputForm,
            ...this.pagination,
          },
          errorHandle: true,
        })
          .then((data) => {
            this.informationList.push(...data.records)
            this.total = data.total
            if (this.informationList.length === this.total) {
              this.loadMoreStatusText = "noMore"
            } else {
              this.loadMoreStatusText = "more"
            }
            resolve()
          })
          .catch((err) => {
            reject(err)
          })
      })
    },
    //重置分页并刷新列表
    resetPaginationAndRefreshList() {
      return new Promise((resolve, reject) => {
        this.pagination.current = 1
        this.informationList = []
        uni.showLoading({ title: "加载中" })
        this.getInformationList()
          .then(() => {
            resolve()
          })
          .catch((err) => {
            reject(err)
          })
          .finally(() => {
            uni.hideLoading()
          })
      })
    },
    //查看资料详情
    async viewDetail(item) {
      uni.navigateTo({
        url: "/shopping/pages/informationDetail/index?id=" + item.id,
      })
    },
    //下载资料
    async download(item) {
      //判断试卷是否锁住
      //没有锁住直接下载
      if (!item.isLock) {
        information.download(item.id)
      } else {
        if (
          await showModal({
            title: "提示",
            content: "资料尚未解锁",
            confirmText: "立即解锁",
          })
        ) {
          await this.viewDetail(item)
        }
      }
    },
  },
  //到达页面底部，加载下一页
  async onReachBottom() {
    if (this.loadMoreStatusText !== "noMore" && this.loadMoreStatusText !== "loading") {
      this.loadMoreStatusText = "loading"
      this.pagination.current++
      await this.getInformationList()
    }
  },
  onPullDownRefresh() {
    this.$refs.information.pullDownRefresh()
  },
  //右上角分享
  async onShareAppMessage() {
    return await shareInfo.getTJGShareInfo({
      path: "/pages/shopping/index",
    })
  },
}
</script>

<template>
  <view class="page">
    <!--		不黏在头部-->
    <view class="header">
      <view class="search-input">
        <input
          type="text"
          placeholder="请输入资料名称进行搜索"
          class="input"
          v-model="inputForm.title"
          @confirm="resetPaginationAndRefreshList"
        />
        <view class="search-btn" @click="resetPaginationAndRefreshList">
          <image :src="searchIcon" class="icon"></image>
        </view>
      </view>
    </view>
    <!--		黏在头部-->
    <view class="header-sticky">
      <!--			考试选择-->
      <view class="tab-list">
        <view
          class="tab-item"
          v-for="item in examList"
          :key="item.examId"
          :class="{ active: item.examId === inputForm.examId }"
          @click="
            inputForm.examId = item.examId
            resetPaginationAndRefreshList()
          "
        >
          {{ item.examName }}
          <view class="active-dot" v-show="item.examId === inputForm.examId"></view>
        </view>
      </view>
      <!--			分类-->
      <view class="selector-list">
        <view class="selector-item" @click="$refs.informationTypePicker.open()">
          <view class="label">类别: {{ inputForm.informationTypeName ? inputForm.informationTypeName : "不限" }}</view>
          <image class="icon" :src="downArrowIcon"></image>
        </view>
        <view class="selector-item" @click="$refs.yearsPicker.open()">
          <view class="label">年份: {{ inputForm.year ? inputForm.year : "不限" }}</view>
          <image class="icon" :src="downArrowIcon"></image>
        </view>
      </view>
    </view>
    <!--		空状态-->
    <empty v-if="total === 0 && loadMoreStatusText !== 'more'" height="calc(100vh - 252rpx)"></empty>
    <!--		列表-->
    <view class="information-list" v-else>
      <view class="information-item" v-for="item in informationList" :key="item.id">
        <view class="content" @click="viewDetail(item)">
          <view class="header">
            <view class="information-name">{{ item.title }}</view>
            <image class="lock-icon" :src="lockIcon" mode="widthFix" v-if="item.isLock"></image>
          </view>
          <!--					类别和年份-->
          <view class="class-name">{{ item.informationTypeName }} - {{ item.year }}年</view>
          <view class="tab-list">
            <view class="tab-item red" v-if="item.isNew === 1">NEW</view>
            <view class="tab-item orange" v-if="['MemberFree', 'MemberFreeOrBuy'].includes(item.feeRules)">会员免费 </view>
            <view class="tab-item green" v-if="item.fileExt">{{ item.fileExt }}</view>
          </view>
          <!--					访问量和下载人数-->
          <view class="statistic">
            <!--							查看人数-->
            <view class="item">
              <image class="icon" :src="viewIcon"></image>
              <view class="text">{{ item.seeNum }}</view>
            </view>
            <!--							下载人数-->
            <view class="item">
              <image class="icon" :src="downloadLightIcon"></image>
              <view class="text">{{ item.downloadVolume + item.virtualDownloadVolume }}</view>
            </view>
          </view>
        </view>
        <view class="footer-btn">
          <view class="btn info" @click="viewDetail(item)">查看详情</view>
          <view class="btn primary" @click="download(item)">
            <image :src="downloadIcon" class="icon"></image>
            立即下载
          </view>
        </view>
      </view>
      <uni-load-more :status="loadMoreStatusText"></uni-load-more>
    </view>
    <!--		年份选择器-->
    <popupPicker
      ref="yearsPicker"
      :picker-option-list="optionList.yearList"
      v-model="inputForm.year"
      title="年份"
      @change="resetPaginationAndRefreshList"
    ></popupPicker>
    <!--		类别选择器-->
    <popupPicker
      ref="informationTypePicker"
      :picker-option-list="optionList.informationTypeList"
      picker-value-key="informationTypeCode"
      picker-label-key="informationTypeName"
      v-model="inputForm.informationTypeCode"
      title="资料类别"
      @change="
        (val) => {
          inputForm.informationTypeName = val.informationTypeName
          resetPaginationAndRefreshList()
        }
      "
    ></popupPicker>
		
		<studyRoomFloat></studyRoomFloat>
  </view>
</template>

<style scoped lang="scss">
.page {
  > .header {
    background: var(--theme-color);
    padding: {
      bottom: 16rpx;
      left: 30rpx;
      right: 30rpx;
    }

    .search-input {
      height: 70rpx;
      display: flex;
      align-items: center;
      padding: {
        left: 20rpx;
        right: 10rpx;
      }
      background: white;
      border-radius: 35rpx;

      > .input {
        width: 0;
        flex: 1;
      }

      .search-btn {
        margin-left: 20rpx;
        width: 60rpx;
        height: 60rpx;
        border-radius: 35rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        > .icon {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
  }

  .header-sticky {
    padding: {
      top: 4rpx;
      left: 30rpx;
      right: 30rpx;
      bottom: 20rpx;
    }
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 8rpx 10rpx rgba(0, 0, 0, 0.1);
    background: white;

    .selector-list {
      margin-top: 16rpx;
      display: flex;
      .selector-item {
        display: flex;
        align-items: center;
        background: var(--gray-background-color);
        height: 50rpx;
        border-radius: 25rpx;
        padding: 0 20rpx;

        &:not(:first-child) {
          margin-left: 20rpx;
        }

        > .label {
          color: var(--text-color);
          font-size: 30rpx;
        }

        .icon {
          width: 20rpx;
          height: 20rpx;
          margin-left: 20rpx;
        }
      }
    }

    .tab-list {
      display: flex;
      flex-wrap: nowrap;
      padding: 10rpx 0;
      width: 100%;
      overflow-x: scroll;
      .tab-item {
        font-size: 32rpx;
        margin-right: 50rpx;
        position: relative;
        min-width: max-content;
        &.active {
          font-weight: bold;
        }
        > .active-dot {
          position: absolute;
          left: 50%;
          bottom: -10rpx;
          transform: translateX(-50%);
          height: 6rpx;
          width: 60rpx;
          background: var(--theme-color);
          border-radius: 5rpx;
          z-index: 99;
        }
      }
    }
  }

  .information-list {
    background: var(--gray-background-color);
    padding: 30rpx;
    min-height: calc(100vh - 252rpx);

    .information-item {
      &:not(:first-child) {
        margin-top: 30rpx;
      }

      border-radius: 20rpx;
      background: white;

      > .content {
        padding: 30rpx;

        > .header {
          display: flex;
          align-items: center;

          .information-name {
            width: 0;
            flex: 1;
            color: var(--text-color);
            font-size: 34rpx;
            font-weight: bold;
          }

          .lock-icon {
            width: 32rpx;
          }
        }

        > .class-name {
          margin-top: 20rpx;
          color: var(--text-color-light);
          font-size: 30rpx;
        }

        > .tab-list {
          margin-top: 20rpx;
          display: flex;

          > .tab-item {
            height: 50rpx;
            display: flex;
            align-items: center;
            padding: 20rpx;
            border-radius: 25rpx;
            font-size: 26rpx;
            font-weight: bold;

            &:not(:first-child) {
              margin-left: 20rpx;
            }

            &.red {
              background: linear-gradient(to right, rgb(238, 9, 121), rgb(255, 106, 0));
              color: white;
            }

            &.orange {
              background: linear-gradient(to right, rgb(255, 126, 95), rgb(254, 180, 123));
              color: white;
            }

            &.green {
              background: linear-gradient(to right, rgb(17, 153, 142), rgb(56, 239, 125));
              color: white;
            }
          }
        }

        .statistic {
          margin-top: 20rpx;
					display: flex;
					.item {
						&:not(:first-child) {
							margin-left: 70rpx;
						}
						display: flex;
						align-items: center;
						.icon {
							width: 28rpx;
							height: 28rpx;
						}
						.text {
							color: var(--text-color-light);
							font-size: 28rpx;
							margin-left: 10rpx;
						}
					}
        }
      }

      .footer-btn {
        margin-top: 10rpx;
        border-top: 2rpx solid var(--border-color);
        display: flex;

        > .btn {
          width: 0;
          flex: 1;
          display: flex;
          align-items: center;
          height: 80rpx;
          justify-content: center;
          font-size: 30rpx;

          &:not(:first-child) {
            border-left: 2rpx solid var(--border-color);
          }

          &.primary {
            color: var(--text-color-theme);
          }

          &.info {
            color: var(--text-color-light);
          }

          > .icon {
            width: 30rpx;
            height: 30rpx;
            margin-right: 20rpx;
          }
        }
      }
    }
  }
}
</style>
